<template>
  <div>
    <div class="box-to-top" v-if="isTop>200">
      <a @click="toTop" href="javascript:void(0)">
        <i class="el-icon-caret-top"></i>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        active:0,
        isTop:0,
        setInter:null
      }
    },
    methods:{
      toTop(){
        let top = document.documentElement.scrollTop
        console.log(document.documentElement.scrollTop)

        this.setInter =  setInterval(()=>{
          if (top>0){
            top-=1000
            document.documentElement.scrollTop -=1000
          }else{
            document.documentElement.scrollTop = 0
            window.clearInterval(this.setInter)
          }
        },50)

      },
      getScroll(){
        window.addEventListener('scroll', () => {
          let scrollTop = document.documentElement.scrollTop
          this.isTop = scrollTop
        })
      },
    },
    mounted() {
      window.clearInterval(this.setInter)
      this.getScroll()
    }
  }
</script>

<style scoped lang="scss">
.box-to-top{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: fixed;
  bottom: 100px;
  right: 10vw;
  z-index: 999;
  a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    i{
      font-size: 30px;
      color: #25B900;
    }
  }
}
</style>